<template>
  <div class="com-container">
    <div class="com-chart" ref="sellerBar"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      chartInit: null,
      allData: null,//服务器返回的数据
      currentPage: 2,//当前显示的页数
      totalPage: 0,//一共多少页
      timerId: null,//定时器ID
    };
  },
  destroyed() {
    clearInterval(this.timerId)
    //销毁监听事件以防止内存泄漏
    window.removeEventListener('resize', this.resizeEcharts)
  },
  //vue写方法的钩子
  methods: {
    //初始化echartsInstance对象
    initChart() {
      this.chartInit = this.$echarts.init(this.$refs.sellerBar, this.theme);
      //初始化option

      const initOption = {
        title: {
          text: "| 商家销售统计",
          left: 20,
          top: 20,

        },
        grid: {
          top: '20%',
          left: '13%',
          right: '10%',
          bottom: '10%',
          containLable: true,//从文边距开始距离上述位置的边距
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              // 指明颜色渐变的方向
              // 指明不同百分比之下颜色的值
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                // 百分之0状态之下的颜色值
                {
                  offset: 0,
                  color: '#5052EE'
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: '#AB6EE5'
                }
              ])
            },
            label: {
              show: true,
              position: 'right',
              textStyle: {
                color: 'white'
              }
            },
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            z: 0,
            lineStyle: {

              color: '#2D3443'
            }
          }
        },
      }
      this.chartInit.setOption(initOption)
      this.chartInit.on('mouseover', () => {
        //鼠标移入事件
        console.log("aa")
        clearInterval(this.timerId)
      })
      this.chartInit.on('mouseout', () => {
        //鼠标移出事件
        this.starInterval()
      })
      //让echarts自适应边框的宽度
      this.chartInit.resize();
    },
    //获取服务器数据
    async getData() {
      const { data: ret } = await this.$http.get('seller');
      this.allData = ret
      this.updataChart();
      this.starInterval()
    },
    //更新图表
    updataChart() {

      this.allData.sort((a, b) => {
        return a.value - b.value
      })
      //计算一共多少页
      this.totalPage = this.allData.length / 5 == 0 ? this.allData.length / 5 : this.allData.length / 5 + 1
      var statr = (this.currentPage - 1) * 5;//开始显示条数
      var end = this.currentPage * 5//结束显示条数
      const showData = this.allData.slice(statr, end)
      const sellerName = showData.map((item) => {
        return item.name;
      })
      const sellerValue = showData.map((item) => {
        return item.value;
      })

      //console.log(sellerName)
      //console.log(sellerValue)
      //添加了数据的option
      const dataOption = {
        yAxis: {
          data: sellerName
        },
        series: [
          {
            data: sellerValue,

          }
        ]
      }
      this.chartInit.setOption(dataOption)
    },
    starInterval() {

      if (this.timerId) {
        clearInterval(this.timerId)
      }
      this.timerId = setInterval(() => {
        this.currentPage++;
        if (this.currentPage > this.totalPage - 1) {
          this.currentPage = 1;
        }

        this.updataChart()
      }, 3000)
    },
    //动态适配电脑的分辨率
    resizeEcharts() {
      console.log(this.$refs.sellerBar.offsetWidth);
      const offsetSize = this.$refs.sellerBar.offsetWidth / 100 * 3.6;
      const resizeOption = {
        title: {
          textStyle: {
            fontSize: offsetSize
          }
        },
        series: [
          {
            barWidth: offsetSize,
            itemStyle: {
              barBorderRadius: [0, offsetSize / 2, offsetSize / 2, 0],
            },
          }
        ],
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: offsetSize,
            }
          }
        },

      }
      this.chartInit.setOption(resizeOption)
      this.chartInit.resize()
    }
  },
  computed: {
    ...mapState(['theme'])

  },
  watch: {
    theme() {
      this.chartInit.dispose()
      this.initChart()
      this.resizeEcharts()
      this.updataChart()
    }
  },
  mounted() {
    this.initChart();
    this.getData(),
      //监听window窗口的大小变化
      window.addEventListener('resize', this.resizeEcharts)
    this.resizeEcharts()
  },
};
</script>

<style lang="less">
.sellerBar {
  width: 100%;
  height: 100vh;
}
</style>